<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<block v-for="(item,index) in list" :key="index">
				<view class="time">{{item.create_time}}</view>
				<view class="kuai">
					<view class="title">{{item.title}}</view>
					<view class="details">{{item.content}}</view>
				</view>
			</block>
			<w-load-more ref="wLoadMore"></w-load-more>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				list:[],
				show:false
			};
		},
		onLoad() {
			this.getlist(1)
		},
		onReachBottom() {
			if(this.list.length < 10) return
			this.page++
			this.$refs['wLoadMore'].setLoading()
			this.getlist()
		},
		methods:{
			async getlist(loading){
				try{
					let result = await this.$request({
						loading,
						method:'post',
						url:'/api/user/getMessageList',
						data:{
							page:this.page
						}
					})
					let data = result.data.data.data
					if(this.page == 1){
						this.list = data
						this.show = true
					}else{
						this.list = this.list.concat(data)
						this.$refs['wLoadMore'].setNomore()
						if(data.length == 0){
							this.page--
						}
					}

				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx 30rpx 30rpx;

		.time {
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
			text-align: center;
			padding: 32rpx 0 24rpx 0;
		}

		.kuai {
			background: #fff;
			border-radius: 20rpx;
			padding: 32rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 20rpx;
			}
			.details{
				font-size: 30rpx;
				font-weight: 400;
				color: #333333ad;
			}
		}
	}
</style>
